<template>
  <el-dialog :title="`${infos?.id ? '编辑' : '新增'}菜单`" :model-value="show" width="700px" @close="commEvent.onClose">
    <el-form ref="formRef" :model="formValue" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上级菜单" prop="pid">
            <el-tree-select
              v-model="formValue.pid"
              :data="pidOptions"
              node-key="id"
              check-strictly
              :render-after-expand="false"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              :props="{ label: 'name', value: 'id' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="formValue.type">
              <el-radio :value="1">菜单</el-radio>
              <el-radio :value="2">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.type !== 2" :span="12">
          <el-form-item label="图标名称" prop="icon">
            <el-popover placement="bottom-start" :width="540" trigger="click">
              <template #reference>
                <el-input v-model="formValue.icon" placeholder="点击选择图标" readonly>
                  <template #prefix>
                    <el-icon :size="16" color="#606266" v-if="formValue.icon">
                      <component :is="formValue.icon"></component>
                    </el-icon>
                  </template>
                </el-input>
              </template>
              <icon-select ref="iconSelectRef" @icon-selected="commEvent.iconSelected" :active-icon="formValue.icon" />
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="formValue.name" placeholder="菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="sort">
            <el-input-number v-model="formValue.sort" :min="1" controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.type !== 2" :span="12">
          <el-form-item label="路由名称" prop="path">
            <el-input v-model="formValue.path" placeholder="路由名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.type !== 2" :span="12">
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="formValue.component" placeholder="组件路径" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.type !== 2" :span="12">
          <el-form-item label="是否全屏" prop="isFull">
            <el-radio-group v-model="formValue.isFull">
              <el-radio :value="true">是</el-radio>
              <el-radio :value="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.type !== 2" :span="12">
          <el-form-item label="是否固定" prop="isAffix">
            <el-radio-group v-model="formValue.isAffix">
              <el-radio :value="true">是</el-radio>
              <el-radio :value="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.type !== 2" :span="12">
          <el-form-item label="显示状态" prop="isHide">
            <el-radio-group v-model="formValue.isHide">
              <el-radio :value="false">显示</el-radio>
              <el-radio :value="true">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.type !== 2" :span="12">
          <el-form-item label="是否缓存" prop="isKeepAlive">
            <el-radio-group v-model="formValue.isKeepAlive">
              <el-radio :value="true">是</el-radio>
              <el-radio :value="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.type === 1" :span="12">
          <el-form-item label="权限字符">
            <el-input v-model="formValue.perms" placeholder="权限字符"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-else :span="12">
          <el-form-item label="权限字符" prop="perms">
            <el-select v-model="formValue.perms" placeholder="请选择权限字符" clearable>
              <el-option v-for="item in permOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="commEvent.onEnter">确定</el-button>
      <el-button @click="commEvent.onClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, nextTick, PropType, ref, watch } from "vue"
import { ElMessage } from "element-plus"
import type { FormInstance, FormRules } from "element-plus"
import IconSelect from "@/components/IconSelect/index.vue"
import { saveMenuApi, dataDictionaryByType } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/system"
const props = defineProps({
  show: { type: Boolean, default: false },
  tableData: { type: Array as PropType<SystemSpace.MenuTree[]>, default: () => [] },
  infos: { type: Object as PropType<SystemSpace.MenuTree>, default: () => {} },
  pid: { type: Number, default: 0 }
})
const emit = defineEmits(["update:show", "refresh"])
// 参数
const formRef = ref<FormInstance>() // 表单实例
const permOption = ref<Array<{ label: string; value: string }>>([])
// 表单数据
const formValue = ref({
  pid: 0,
  type: 1,
  icon: "",
  name: "",
  sort: 0,
  path: "",
  component: "",
  isFull: false,
  isAffix: false,
  isHide: false,
  isKeepAlive: true,
  perms: ""
})
// 表单校验
const rules = ref<FormRules>({
  pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
  type: [{ required: true, message: "请选择菜单类型", trigger: "change" }],
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
  path: [{ required: true, message: "请输入路由名称", trigger: "blur" }],
  component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
  isFull: [{ required: true, message: "请选择是否全屏", trigger: "change" }],
  isAffix: [{ required: true, message: "请选择是否固定", trigger: "change" }],
  isHide: [{ required: true, message: "请选择显示状态", trigger: "change" }],
  isKeepAlive: [{ required: true, message: "请选择是否缓存", trigger: "change" }],
  isLink: [{ required: true, message: "请选择是否外链", trigger: "change" }],
  perms: [{ required: true, message: "请选择权限字符", trigger: "blur" }]
})
// 事件集合
const commEvent = {
  // 关闭弹窗
  onClose: () => {
    emit("update:show", false)
  },
  // 获取权限字符
  getPermsDict: async () => {
    const { data } = await dataDictionaryByType("button-permission")
    permOption.value = data.map(item => ({
      label: item.dictLabel,
      value: item.dictValue
    }))
  },
  // 图标选择
  iconSelected: (icon: string) => {
    formValue.value.icon = icon
  },
  // 确认提交
  onEnter: () => {
    if (!formRef.value) return
    formRef.value.validate(async valid => {
      if (!valid) return
      const params: SystemSpace.MenuAdd = { ...formValue.value }
      if (props.infos?.id) {
        params.id = props.infos.id
      }
      const res = await saveMenuApi(params)
      if (res.code === "200") {
        ElMessage.success("操作成功")
        commEvent.onClose()
        emit("refresh")
      }
    })
  }
}
// 上级菜单选项
const pidOptions = computed(() => {
  return [{ id: 0, name: "主类目", children: props.tableData }]
})
watch(
  () => props.show,
  val => {
    if (val) {
      commEvent.getPermsDict()
      nextTick(() => {
        if (!formRef.value) return
        formRef.value.resetFields()
        if (props.infos?.id) {
          const { pid, type, icon, name, sort, path, component, isFull, isAffix, isHide, isKeepAlive, perms } = props.infos
          formValue.value = { pid, type, icon, name, sort, path, component, isFull, isAffix, isHide, isKeepAlive, perms }
        }
        formValue.value.pid = props.pid
      })
    }
  }
)
</script>

<style lang="scss" scoped></style>
